<template>
   <view class="wrap">
		<view :style="{ height: `${statusBarHeight}px` }"></view>
				<!-- 自定义导航栏高度 并 居中 -->
		<view :style="{
		  height: `${barHeight}px`,
		  'line-height': `${barHeight}px`,
		  'text-align': 'center',
		}">
			<text>他说</text>
		</view>
		<view class="searchImgWrap">
			<view v-if="showInfo" class="searchLeft"></view>
			<view class="searchRight"></view>
		</view>
        <view class="container">
            <view class="title">{{ info.title }}</view>
            <!-- <view class="details">{{ info.message }}</view> -->
			<view class="content">
				<rich-text  :nodes="info.message"></rich-text>
			</view>
            <view class="line"></view>
        </view>
   </view>
</template>
<script>
import { dreamDetailsAPI } from '../../../utils/api'
import { showInfoFunc } from '../../../utils/common'
export default {
   data() {
     return {
        showInfo: false,
		 statusBarHeight:'',
		 barHeight:'',
        info:{},
     }
   },
   async onLoad(options){
        const res = await dreamDetailsAPI(options.id);
        this.info = res.result;
        this.showInfo = showInfoFunc("解梦") == undefined ? false:true
   },
   mounted() {
   	// 状态栏高度
   	this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; 
   	// 胶囊数据
   	const { top, height } = wx.getMenuButtonBoundingClientRect();
   	// 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2, 如果获取不到设置为38
   	this.barHeight = height ? height + (top - this.statusBarHeight) * 2 : 38;
   },
   methods: {
     
   }
};
</script>
<style lang='less' scoped>
	.searchImgWrap{
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 30rpx;
	}
	.searchLeft{
		width: 280rpx;
		height: 86rpx;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/search.png') no-repeat;
		background-size: 100% 100%;
	}
	.searchRight{
		width: 248rpx;
		height: 340rpx;
		background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/searchImg2.png') no-repeat;
		background-size: 100% 100%;
	}
.container{
	margin: -120rpx 30rpx 30rpx 30rpx;
    background-color: #fff;
	position: relative;
	z-index: 9999;
	color: #333333;
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	.content{
		margin: 30rpx 30rpx 30rpx 30rpx;
		padding: 30rpx;
		background: linear-gradient(180deg, #FFF0DC 0%, #FCF9EF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #FFE3D0;
	}
    .line{
        width: 100%;
        height: 2rpx;
        background: #E6E6E8;
        margin: 30rpx 0;
    }
    .forContainer{
        margin: 30rpx 0;
        padding: 30rpx;
        background: rgba(255,127,34,0.05);
        border-radius: 12rpx;
        border: 1rpx solid #E6E6E8;
        .contentDetails{
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #888889;
            line-height: 42rpx;
        }
        .titleWrap{
            font-size: 28rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #222229;
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;
            image{
                width: 28rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
        }
    }
    .details{
        text-indent: 2em;
        padding: 30rpx;
        margin-top: 30rpx;
        background: #F8F8F9;
        border-radius: 16rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 34rpx;
    }
    .title{
    text-align: center;
    font-size: 32rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
	padding-top: 40rpx;
}
}

.wrap{
    background: url('https://ctrlsoft.net.cn/app_static/hesaid/img/oneiromancy/background.png') no-repeat;
    background-size: 100% 100%;
}
</style>